<template>
  <el-container>
    <el-header>
      <div class="header-warp">
        <div class="header-title">
          <img src="./images/logo.png" alt="" />
          <div class="header-title-text">
            <p class="title">山西省军区气象服务监测预警平台</p>
          </div>
        </div>

        <div class="header-router">
          <div
            v-for="(item, index) in menuRouterList"
            :key="index"
            class="header-router-item"
            :class="{ active: route.path === item.path }"
            @click="handleJumpRouter(item.path)"
          >
            <span>{{ item.label }}</span>
          </div>
        </div>
        <div class="header-operation">
          <el-dropdown @command="handleCommand">
            <BaseIcon
              class="base-icon"
              src="icon-yonghu"
              type="iconfont"
              :size="24"
            />

            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="forgotPassword"
                  >修改密码</el-dropdown-item
                >
                <el-dropdown-item command="handleLoginOut"
                  >退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span class="user">{{ userName }}</span>
        </div>
      </div>
    </el-header>
    <el-main>
      <slot></slot>
    </el-main>
  </el-container>
  <div class="password" v-if="passwordPopup">
    <div class="header">
      修改密码
      <img @click="handleDialogClose" src="./images/close.png" alt="" />
    </div>
    <div class="rows">
      <label for="">密码</label>
      <el-input v-model="oldPassword" type="password" placeholder="密码" />
    </div>
    <div class="rows">
      <label for="">新密码</label>
      <el-input v-model="newPassword" type="password" placeholder="新密码" />
    </div>
    <div class="dialog-bottom">
      <div @click="sure">确认</div>
      <div @click="handleDialogClose">取消</div>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import menuRouter from '@/router/menuRouter'
import { useUserStore } from '@/store/modules/user'
import { useBaseLeafletMapStore } from '@/store/modules/baseLeafletMap'
import { ElMessage } from 'element-plus'
import apiList from '@/pages/login/api/api'
const route = useRoute()
const router = useRouter()
const store = useUserStore()
const newPassword = ref()
const oldPassword = ref()
const baseLeafletMapStore = useBaseLeafletMapStore()
let userId = ref()
let userName = ref('用户名')
const handleJumpRouter = item => {
  router.push({
    path: item
  })
}
let menuRouterList = ref([])
const handleLoginOut = async () => {
  const isLogout = await store.handleLogout()
  if (isLogout) {
    // window.location.href = '#/login'
    router.push({ path: '/login', replace: true })
    // location.href = '#/login'
  }
}
const passwordPopup = ref(false)
const forgotPassword = () => {
  newPassword.value = ''
  oldPassword.value = ''
  passwordPopup.value = true
}
const handleDialogClose = () => {
  passwordPopup.value = false
}
const sure = () => {
  apiList
    .updatePwd({
      oldPassword: oldPassword.value,
      newPassword: newPassword.value
    })
    .then(res => {
      if (res.code == 200) {
        ElMessage.success('修改成功')
        passwordPopup.value = false
      } else {
        ElMessage.error(res.msg)
      }
    })
}
const handleCommand = command => {
  switch (command) {
    case 'handleLoginOut':
      handleLoginOut()
      break
    case 'forgotPassword':
      forgotPassword()
      break
  }
}
onMounted(() => {
  apiList.getInfo().then(res => {
    if (res.code == 200) {
      userId.value = res.user.userId
      userName.value = res.user.userName
      localStorage.setItem('userInfo', JSON.stringify(res.permissions))
      menuRouterList.value = menuRouter
        .map(item => {
          if (!res.permissions.includes('*:*:*')) {
            if (item.meta.permissions) {
              item.meta.show = res.permissions.includes(item.meta.permissions)
            }
          } else {
            item.meta.show = true
          }
          return item
        })
        .filter(item => item.meta?.show)
    }
  })
})
</script>

<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 100%;
  position: relative;

  .el-header {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 160px;
    background: url('./images/bg.png') no-repeat;
    background-size: 100% 100%;
    z-index: 99;
    padding-left: 48px;
    .header-warp {
      width: 100%;
      height: 67px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .header-title {
        width: 580px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: 400;
        margin: 0 auto;
        font-family: YouSheBiaoTiHei-Regular;

        img {
          width: 40px;
          height: 40px;
          margin-right: 10px;
        }

        &-text {
          flex: 1;
          height: 82px;
          display: flex;
          justify-content: center;
          flex-direction: column;

          .title {
            white-space: nowrap;
            color: #fff;
            margin-bottom: 5px;
            letter-spacing: 1px;

            span {
              color: #0aa7ff;
            }
          }

          .english {
            font-size: 12px;
            color: #bebebe;
          }
        }
      }
      .header-router {
        flex: 1;
        height: 100%;
        display: flex;

        .header-router-item {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          //width: 104px;
          height: 100%;
          color: #cadef9;
          cursor: pointer;
          transition: all 0.3s;
          //padding: 0 20px;
          max-width: 150px;
          font-size: 16px;
          font-weight: bold;
          span {
            margin-top: 5px;
            white-space: nowrap;
          }

          &.active {
            color: #ffffff;
            width: 174px;
            height: 62px;
            background: url(./images/active.png) no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }

    .header-operation {
      position: relative;
      min-width: 150px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .base-icon {
        width: 42px;
        height: 42px;
        background: #07559d;
        border-radius: 50%;
        margin-right: 20px;
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
      }
      .user {
        width: auto;
        color: #fff;
        margin-right: 20px;
      }
    }
  }

  .el-main {
    width: 100%;
    height: calc(100% - 62px - 26px);
    padding: 0 0 0;
    margin-top: 60px;
    z-index: 100;
    background-color: #f6f9fc;
    overflow: hidden;
  }

  .el-footer {
    --el-footer-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    background: #0b0e97;
  }
}
.password {
  width: 500px;
  height: 245px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 13, 35, 0.84);
  box-shadow: 0px 0px 38px 1px rgba(0, 204, 255, 0.26),
    inset 0px 0px 27px 1px #00d5ff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #00a8ff;
  z-index: 1200;
  padding: 20px;
  box-sizing: border-box;
  .header {
    height: 35px;
    width: 100%;
    border-bottom: 1px solid #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    margin-bottom: 15px;
    img {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }
  .dialog-bottom {
    width: 100%;
    height: 36px;
    display: flex;
    justify-content: space-evenly;
    div {
      width: 79px;
      height: 36px;
      background: #000000;
      box-shadow: inset 0px 0px 22px 1px #006888;
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #007588;
      font-weight: 300;
      font-size: 14px;
      color: #ffffff;
      line-height: 36px;
      text-align: center;
      cursor: pointer;
    }
    div:first-child {
      background: #004155;
      box-shadow: inset 0px 0px 22px 1px #00c4ff;
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #00cff0;
    }
  }
}
</style>
<style lang="scss">
.rows {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  label {
    color: #fff;
    width: 15%;
    display: block;
  }
  .el-form-item__label {
    color: #fff;
  }
  .el-input__wrapper {
    background-color: transparent;
    box-shadow: 1px 1px 1px transparent;
    border-radius: 3px;
    border: 1px solid #00a6d9;
  }
  .el-input__inner {
    color: #fff;
  }
}
</style>
